<route lang="json5" type="page">
{
  layout: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '央国企选岗助手',
  },
}
</route>
<template>
  <view class="index-page">
    <view
      class="index-page__bg fixed-bg"
      :style="{
        background: `linear-gradient(180deg, #fce5d7 0%, #fad6c2 100%)`,
      }"
    >
      <image class="w-full h-[664rpx]" :src="bgImg" mode="scaleToFill" />
    </view>
    <scroll-view style="height: 100%" scroll-y @scrolltolower="handleScroll">
      <image class="index-page__intro" src="@/assets/images/index/intro.png" mode="scaleToFill" />

      <view class="index-page__category flex px-5 gap-3">
        <view class="index-page__category--left">
          <view class="index-page__category--left--current flex items-center">
            <image src="@/assets/images/index/drkb.png" mode="scaleToFill" />
            <view>
              <view>当前可报</view>
              <view class="flex items-end">
                <wd-count-to
                  custom-class="number"
                  :end-val="currentReportCount"
                  :fontSize="24"
                  color="#FF7800"
                >
                </wd-count-to>
                <text class="ml-[10rpx]">岗位</text>
              </view>
            </view>
          </view>
          <view class="index-page__category--left--xz flex items-center">
            <image src="@/assets/images/index/xz.png" mode="scaleToFill" />

            <view>
              <view>24h 新增</view>
              <view class="flex items-end">
                <wd-count-to
                  custom-class="number"
                  :end-val="currentReportCount24h"
                  :fontSize="24"
                  color="#09B25F"
                >
                </wd-count-to>
                <text class="ml-[10rpx]">岗位</text>
              </view>
            </view>
          </view>
        </view>
        <view class="index-page__category--right">
          <view
            class="index-page__category--right--zyjd flex justify-between"
            @click="toPage('/pages-sub/expertAnalysis/index')"
          >
            <view>
              <text>专业解读</text>
              <text>zhuanye</text>
            </view>
            <image src="@/assets/images/index/zyjd.png" mode="scaleToFill" />
          </view>
          <view
            class="index-page__category--right--sabd flex justify-between"
            @click="toPage('/pages-sub/consultant/index')"
          >
            <view>
              <text>上岸宝典</text>
              <text>shangan</text>
            </view>
            <image src="@/assets/images/index/sabd.png" mode="scaleToFill" />
          </view>
        </view>
      </view>

      <!-- 添加求职意向 -->
      <view class="index-page__add-intention" @click="toJobIntention" v-if="!resumeInfo?.id">
        <image src="@/assets/images/plus.png" mode="scaleToFill" />
        <view class="index-page__add-intention--content">添加求职意向</view>
      </view>
      <view class="index-page__intention" v-else>
        <view>
          <text>{{ resumeInfo?.cityName }}</text>
          <wd-divider vertical v-if="resumeInfo?.cityName && resumeInfo?.educationalBackground" />
          <text>{{ resumeInfo?.educationalBackground }}</text>
        </view>
        <view class="index-page__intention--update" @click="toJobIntention">
          <image src="@/assets/images/edit.png" />
          修改简历
        </view>
      </view>

      <!-- 岗位查找 -->
      <searchJob :list="list" @getList="getList"></searchJob>
    </scroll-view>

    <!-- <loginPopup ref="loginPopupRef" /> -->
    <noPermissionPopup ref="noPermissionPopupRef" />
  </view>
</template>

<script lang="ts" setup>
  import searchJob from './components/searchJob.vue';
  // import loginPopup from '@/pages/components/loginPopup.vue';
  import noPermissionPopup from '@/pages/components/noPermissionPopup.vue';
  import bgImg from '@/assets/images/index/bg.png';
  import { navigateTo } from '@/utils/router';
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  import {
    ApiHomeCurrentReportCount,
    ApiHomeAddReportCount,
    ApiHomeAddReportCountList,
    ApiHomeGetResumeInfo,
  } from '@/service/index';
  import scrollMixin from '@/hooks/scrollMixin';

  defineOptions({
    name: 'HomeIndex',
  });

  const { isLogined, userInfo } = storeToRefs(useUserStore());
  const currentReportCount = ref(0);
  const currentReportCount24h = ref(0);
  const noPermissionPopupRef = ref();
  const resumeInfo = ref<{ educationalBackground?: string; id?: number; cityName?: string }>({});

  const { initLoad, loadMore, list } = scrollMixin();

  const toJobIntention = () => {
    navigateTo('/pages-sub/jobIntetion/index', { id: resumeInfo.value.id });
  };
  const handleScroll = () => {
    console.log('handleScroll');
    if (!userInfo.value.isMember) {
      return noPermissionPopupRef.value.show();
    }
    loadMore(true);
  };
  const toPage = (url: string) => {
    navigateTo(url);
  };
  const getList = (type?: number) => {
    initLoad({
      api: ApiHomeAddReportCountList,
      params: {
        type: type || undefined,
      },
    });
  };
  onMounted(() => {
    ApiHomeCurrentReportCount().then(({ data }) => {
      currentReportCount.value = (data as number) || 0;
    });
    ApiHomeAddReportCount().then(({ data }) => {
      currentReportCount24h.value = (data as number) || 0;
    });
    if (isLogined.value) {
      ApiHomeGetResumeInfo({ userId: userInfo.value.id }).then(({ data }) => {
        resumeInfo.value = data || {};
      });
    }

    getList();
  });
</script>

<style lang="scss" scoped>
  .index-page {
    height: 100%;
    overflow: hidden;

    &__intro {
      width: 100%;
      height: 192rpx;
    }

    &__category {
      font-family: AlimamaShuHeiTi;
      &--left {
        flex: 1 0 0;
        background: #fff;
        border-radius: 20rpx;
        padding: 8rpx;
        color: #3e4654;
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        image {
          width: 118rpx;
          height: 118rpx;
        }
        &--current {
          border-radius: 20rpx;
          background: rgba($color: #ff9000, $alpha: 0.1);

          & > view {
            & > view:last-child {
              font-family: PingFangSC;
            }
          }

          .number {
            color: #ff7800;
            font-size: 48rpx;
            font-weight: bold;
            margin-right: 10rpx;
            font-family: D-DIN;
          }
        }
        &--xz {
          border-radius: 20rpx;
          background: rgba($color: #00ffad, $alpha: 0.1);
          & > view {
            & > view:last-child {
              font-family: PingFangSC;
            }
          }
          .number {
            color: #09b25f;
            font-size: 48rpx;
            font-weight: bold;
            margin-right: 10rpx;
            font-family: D-DIN, D-DIN;
          }
        }
      }
      &--right {
        flex: 1 0 0;
        image {
          width: 88rpx;
          height: 88rpx;
        }
        .flex {
          padding: 16rpx 20rpx;

          & > view {
            position: relative;
            text {
              display: block;
              &:first-child {
                font-size: 36rpx;
                color: #2a2a2a;
                z-index: 2;
              }
              &:last-child {
                font-family: AlimamaShuHeiTi;
                font-size: 48rpx;
                color: white;
                text-align: left;
                font-style: normal;
                text-transform: uppercase;
                background-clip: text;
                -webkit-background-clip: text;
                position: absolute;
                bottom: -5rpx;
                z-index: 0;
                -webkit-text-stroke: 4rpx transparent;
              }
            }
          }
          image {
            flex-shrink: 0;
            z-index: 10;
          }
        }
        &--zyjd {
          background:
            linear-gradient(180deg, rgba(82, 177, 255, 0.24) 0%, rgba(255, 255, 255, 0) 60%),
            #ffffff;
          border-radius: 20rpx;
          border: 4rpx solid rgba(255, 255, 255, 0.2);
          margin-bottom: 15rpx;

          & > view {
            text {
              &:last-child {
                // 设置文字描边的宽度和颜色

                background: linear-gradient(
                  180deg,
                  rgba($color: #2778ff, $alpha: 0) 50%,
                  rgba($color: #2778ff, $alpha: 0.43) 100%
                );
              }
            }
          }
        }
        &--sabd {
          background:
            linear-gradient(180deg, rgba(255, 82, 240, 0.2) 0%, rgba(255, 255, 255, 0) 60%), #ffffff;
          border-radius: 20rpx;
          border: 4rpx solid rgba(255, 255, 255, 0.2);
          & > view {
            text {
              &:last-child {
                background: linear-gradient(
                  180deg,
                  rgba($color: #fa27ff, $alpha: 0) 0%,
                  rgba($color: #fa27ff, $alpha: 0) 50%,
                  rgba($color: #ff27cb, $alpha: 0.43) 100%
                );
              }
            }
          }
        }
      }
    }

    &__add-intention {
      padding: 32rpx 0;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 20rpx;
      border: 2rpx dashed #ff9703;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 32rpx;
      margin-top: 24rpx;
      gap: 16rpx;
      image {
        width: 44rpx;
        height: 44rpx;
      }
      view {
        font-family: PingFangSC;
        font-weight: 600;
        font-size: 32rpx;
        color: #ff9703;
      }
    }

    &__intention {
      margin: 20rpx 32rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > view:first-child {
        font-weight: 600;
        color: $uni-color-title;
      }
      &--update {
        color: $uni-color-primary;
        font-size: 28rpx;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 16rpx;
        border: 2rpx solid rgba(255, 255, 255, 0.6);
        padding: 8rpx 16rpx;
        image {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
</style>
